<template>
  <div>
    <!-- 希望它显示螺蛳粉 -->
    <!-- 把父里的name1传递给了子里的title -->
    <!-- <my-goods :title="name1" :price="price1" desc="表锅，好次哦"/> -->
    <!-- 希望它显示臭豆腐 -->
    <!-- <my-goods title="臭豆腐" :price="10" desc="长沙臭豆腐"/> -->
    <!-- 希望它显示满汉全席 -->
    <!-- <my-goods title="满汉全席" :price="99"/> -->


    <!-- <my-goods title="满汉全席" :price="9.9" :desc="'深圳特产'"></my-goods> -->

    <!-- 
      $event在原生标签里就是事件对象
      $event在组件里就是组件传过来的值
     -->
    <my-goods
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :price="item.price"
      :desc="item.desc"
      @cut="fn(item, $event)"
    />
  </div>
</template>

<script>
export default {
  methods: {
    fn (item, num) {
      // 谁被点让谁的价格减去0.1
      item.price -= num
      console.log('fn被调用', num) // 0.1
    }
  },
  data () {
    return {
      name1: '螺蛳粉',
      price1: 18,
      // 假设这个数组就是服务器返回的数据
      list: [
        { id: 11, name: '潮汕粥', price: 99, desc: '营养美味' },
        { id: 33, name: '猪脚饭', price: 15, desc: '肥肥的' },
        { id: 39, name: '沙县小吃', price: 14, desc: '吃蒸饺和汤' },
        { id: 434, name: '自选快餐', price: 14, desc: '随便选' }
      ]
    }
  }
}
</script>

<style></style>
